<template>
	<div class="top_shang flex_row space_between " 
	:style="'margin-top:'+data.margin_top+'px;padding:'+data.padding_h+'px '+data.padding_w+'px;'+(data.is_background==1?('background-image:url('+data.background_thumb+');'):'')
	+(data.is_background==0?('background:'+data.background+';'):'')+'border-radius:'+(data.radius||'0')+'px;'">
		<div v-if="data.button_left" class="top_shang_item" >	
			<i :class="data.font_msg" :style="{'color':data.color,'fontSize':data.icon_size+'px'}"/>
			<div v-if="data.is_title" :style="{'color':data.color,'fontSize':data.title_size+'px'}">消息</div>
		</div>
		<div class="search_kuang flex_row space_between" >
			<div :style="'border-radius:'+data.button_radius+'px'">请输入搜索内容</div>
		</div>
		<div v-if="data.button_right" class="top_shang_item">
			<i :class="data.font_share" :style="{'color':data.color,'fontSize':data.icon_size+'px'}"/>
			<div v-if="data.is_title" :style="{'color':data.color,'fontSize':data.title_size+'px'}">分享</div>
		</div>
	</div>
</template>

<script>
    export default {
	props:['data'],
      name: 'ItemSearch',
	  data(){
		  return{
		  }
	  }
    }
</script>
<style >

	.top_header {
		width: 100%;
		position: relative;
		z-index: 1;
		padding-top: 20px;
	}

	.top_shang {
		width: 100%;
		
	}

	.top_shang_item {
		width: 10%;
		position: relative;
		text-align: center;
		font-size: 12px;
		color: #333;
	}

	.xiaoxi_num {
		padding: 0px 10px;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	
		border-radius: 50%;
		color: #FFFFFF;
		font-size: 22px;
		position: absolute;
		top: -10rpx;
		left: 50rpx;
		background-color: #FF0000;
		z-index: 10000;
	}

	.search_kuang {
		justify-content: center;
		width: 80%;
		
		line-height: 50px;
		height: 50px;
		border-radius: 100px;
		position: relative;
	}

	.search_kuang div {
		font-size: 14px;
    height: 30px;
	line-height: 30px;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;
    border: 1px solid #cdcdcd;
	background-color: #fff
	}
	.space_between {
		justify-content: space-between;
	}
</style>
